<template>
    <div>

        <Divider orientation="left">
            设置服务器域名
            <Button v-if="sycButtonVisible" type="primary" size="small" style="margin-left: 10px" @click="handleSynServerDomain">同步配置</Button>
        </Divider>
        <singleValueJsonConfig v-for="(itemValue, itemKey) in data.server_domain"
                               :key-name="domainFieldName.hasOwnProperty(itemKey) ? domainFieldName[itemKey] : itemKey"
                               :json-data="itemValue"
                               :ref="itemKey"
        >
        </singleValueJsonConfig>

        <Divider orientation="left">
            设置业务域名
            <Button v-if="sycButtonVisible"  type="primary" size="small" style="margin-left: 10px" @click="handleSynWebviewDomain">同步配置</Button>
        </Divider>
        <singleValueJsonConfig key-name="小程序业务域名"
                               :json-data="data.webviewdomain"
                               ref="webviewdomain"
        >
        </singleValueJsonConfig>

        <Divider />
        <div style="margin-left: 180px">
            <Button type="primary" @click="handleSubmit">提交</Button>
            <Button @click="handleReset" style="margin-left: 8px">重置</Button>
        </div>
    </div>

</template>
<script>
    import singleValueJsonConfig from './jsonConfigSingleValue'
    import appProjectApiService from '../../api/appProjectList'

    export default {
        name: 'setServerAndWebViewDomain',
        components: {
            singleValueJsonConfig
        },
        data() {
            return {
                domainFieldName: {
                    'requestdomain': 'request 合法域名',
                    'wsrequestdomain': 'socket 合法域名',
                    'uploaddomain': 'uploadFile 合法域名',
                    'downloaddomain': 'downloadFile 合法域名',
                    'webviewdomain': '小程序业务域名',
                }
            }
        },
        props: {
            id: {
                type: Number,
                default: null
            },
            data: {
                type: Object,
                default: null
            },
            sycButtonVisible: {
                type: Boolean,
                default: false
            },
        },
        watch: {},
        methods: {
            handleSynServerDomain() {
                this.sycButtonVisible && this.popConfirm(
                    () => {
                        this.operatorRequestHandler(
                            appProjectApiService.appProjectSynServerDomain(this.id),
                            () => {},
                        );
                    },
                    '提示',
                    '是否同步服务器域名配置？'
                );
            },
            handleSynWebviewDomain() {
                this.sycButtonVisible && this.popConfirm(
                    () => {
                        this.operatorRequestHandler(
                            appProjectApiService.appProjectSynWebviewDomain(this.id),
                            () => {},
                        );
                    },
                    '提示',
                    '是否同步业务域名配置？'
                );
            },
            handleSubmit() {
                let data = {
                    'server_domain': {},
                    'webviewdomain': []
                };
                for (let serverDomainKey in this.data['server_domain']) {
                    data['server_domain'][serverDomainKey] = [];
                    for (let item of this.$refs[serverDomainKey][0].formDynamic.items) {
                        item.status === 1 && data['server_domain'][serverDomainKey].push(item.value);
                    }
                }
                for (let item of this.$refs.webviewdomain.formDynamic.items) {
                    item.status === 1 && data['webviewdomain'].push(item.value);
                }
                this.$emit('on-get-domain-data', data);
            },
            handleReset() {
                for (let serverDomainKey in this.data['server_domain']) {
                    this.$refs[serverDomainKey][0].index = 0;
                    this.$refs[serverDomainKey][0].formDynamic = {items: []};
                }
                this.$refs.webviewdomain.index = 0;
                this.$refs.webviewdomain.formDynamic = {items: []};
            }
        },
        created() {
        }
    }
</script>
<style>
</style>